<template>
  <div>
<el-row style="margin: 10px">
  <el-button :type="ButtonType"  @click="open('消息提示框')">showMsg</el-button>
</el-row>
  </div>
</template>

<script>
export default {
  props: {
    ButtonType: {
      type: String
      // {String}
      // type:  primary|| success || info || warning || danger
    },
    confirmButtonText: {
      type: String,
      default: 'primary'
      // {String}
    },
    type: {
      type: String,
      default: 'alert'
      // {String}
      // type:  alert|| confirm
    },
    cancelButtonText: {
      type: String,
      default: '取消'
      // {String}
    },
    textContent: {
      type: String,
      require: true
      // {String}
    },
    title: {
      type: String,
      default: '提示'
      // {String}
    },
    successContent: {
      type: String,
      default: '操作成功'
      // {String}
    },
    cancelContent: {
      type: String,
      default: '取消操作'
      // {String}
    },
    confirmType: {
      type: String,
      default: 'success'
      // {String}
      // success || error || info
    }

  },
  date () {
    return {

    }
  },
  methods: {
    open (e) {
      if (this.type === 'alert') {
        this.$alert(this.textContent, this.title, {
          confirmButtonText: this.confirmButtonText,
          callback: e => {

          }
        })
      } else {
        this.$confirm(this.textContent, this.title, {
          confirmButtonText: this.confirmButtonText,
          cancelButtonText: this.cancelButtonText,
          type: this.confirmType
        }).then(() => {
          this.$emit('successCallback', 'success')
        })
          .catch(() => {
            this.$emit('cancelCallback', 'faild')
          })
      }
    }
  }
}
</script>

<style>

</style>
